[Pages] Update Nuxt framework guide and improve bindings coverage #12953
Conversation
jculvey
requested review from
GregBrimble,
WalshyDev and
a team
as code owners
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Deploying with
|
| Latest commit: |
131606c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a4f4a0d6.cloudflare-docs-7ou.pages.dev |
| Branch Preview URL: | https://jculvey-nuxt-bindings-update.cloudflare-docs-7ou.pages.dev |
jculvey
changed the title
|
|
||
| You will be asked to authorize access to your GitHub account if you have not already done so. Cloudflare needs this so that it can monitor and deploy your projects from the source. You may narrow access to specific repositories if you prefer; however, you will have to manually update this list [within your GitHub settings](https://github.com/settings/installations) when you want to add more repositories to Cloudflare Pages. | ||
|
|
||
| Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information: | ||
|
|
||
| {{<pages-build-preset framework="nuxt-js">}} | ||
| {{<pages-build-preset framework="nuxt">}} |
There was a problem hiding this comment.
I don't think this change is correct:
If you want to rename the preset you'll also have to rename it here I think:
But I'd be careful about the above since I think this file is also used to generate the dashboard presets... so before updating it I double check that it is ok to do so
|
|
||
| A [binding](/pages/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](/kv/reference/how-kv-works/), [Durable Object](/durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). | ||
| ### Accessing bound resources in your Nuxt application |
There was a problem hiding this comment.
calling "bindings" "bound resources" make things more confusing in my opinion 😅
Co-authored-by: Dario Piotrowicz <dario@cloudflare.com>
This comment was marked as spam.
This comment was marked as spam.
|
|
||
| In Nuxt, add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application. | ||
|
|
||
| The following code block shows an example of accessing a KV namespace in Nuxt. | ||
|
|
||
| ```typescript | ||
| --- | ||
| filename: src/my-endpoint.get.ts | ||
| highlight: [2, 3] | ||
| filename: server/api/hello.ts / server/api/hello.js |
There was a problem hiding this comment.
@deadlypants1973 this is very ugly! 😓
I'm always unsure what's best in these situations... shall we add a js/ts switcher even if completely unnecessary? (since the file content is always the same)
There was a problem hiding this comment.
Switcher added 🙂👍
Although it showcases a small coloring quirk 😓
There was a problem hiding this comment.
(PS: the coloring difference seems a bit wrong to me... I wonder if it is intentional...)
|
|
||
| {{<Aside type="note">}} | ||
|
|
||
| Projects created with C3 have a default `env.d.ts` file. |
There was a problem hiding this comment.
@deadlypants1973 sorry my bad... C3 does not currently do that (and I think it should)
I can remove this bit now or we can add it to C3 before we merge this PR, please let me know what you prefer 🙂
dario-piotrowicz
force-pushed
the
jculvey/nuxt-bindings-update
branch
from
718fa29
to
941941e
Compare
| $ git commit -m "Initial commit" | ||
|
|
||
| $ git branch -M main | ||
| $ git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME> |
There was a problem hiding this comment.
| $ git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME> | |
| $ git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>.git |
PCX Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com>
This change adds more detail to the bindings section of the Nuxt framework guide on how to configure bindings in dev and production. There's a lot of overlap between this PR and this update to the Qwik guide.